<template>
  <div>
 <van-nav-bar left-arrow>
  <template #left>
    <!-- //绑定点击事件跳转到城市列表 -->
    <van-icon name="arrow-down"  @click="gocity"/>
    <!-- //通过$store.state.city.name显示城市名称 -->
    <span>{{$store.state.city.name}}</span>
  </template>
</van-nav-bar>
   <!-- //循环list取到对应的数据并在页面中显示 -->
<div class="box" v-for="(item,index) in list" :key="index">
  <ul>
    <!-- //绑定点击事件跳转到影院详情带上影院的id -->
    <li class="item" @click="gocinema(item.cinemaId)">
      <div >
      <div  class="cname">{{item.name}}</div>
       <div class="cadres">{{item.address}}</div>
     </div>
     <div>
      <div class="bal"><span>￥</span>{{item.lowPrice/100}}<span>起</span></div>
      <!-- 保留两位小数 -->
      <div class="distince">{{item.Distance.toFixed(2)}}公里</div>
     </div>
      </li>
      </ul>
</div>
  </div>

</template>

<script>
export default {
  data(){
    return{
      //定义一个空数组
      list:[]

    }
  },
  methods:{
    //上面传下来id跳转到影院详情页
    gocinema(id){
        this.$router.replace({name:'cinemaInfo',params:{id}})
    },
    //跳转到城市列表
    gocity(){
       this.$router.replace({name:'city',})
    }
  },
  mounted(){
    // 发起请求并通过城市列表的id获取到对应数据
    this.$http.get('cinemaList',{  params:{cityId:this.$store.state.city.cityId}}).then(res=>{
  this.list = res.data.cinemas
    })
  }

}
</script>

<style scoped>
.box{
  
  height: 65px;
 
}
.item{
  height:65px ;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px 15px; 
  background: #fff;
 border-bottom: 1px solid #ededed;
}
.cname{
  max-width:200px;
  color: #191a1b;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cadres{
  margin-top: 5px;
  max-width:200px;
  color: #797d82;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bal{
  font-size: 15px;
  color: #ff5f16;
}
.bal>span:nth-child(1){
    color: #ff5f16;
    font-size: 12px;
    transform:scale(.9);
    font-weight:400
}
.bal>span:nth-child(2){
    color: #ff5f16;
    font-size: 12px;
    transform:scale(.7);
    font-weight:400
}
.distince{
    font-size: 11px;
    transform: scale(.9);
    font-weight: 400;
    color: #797d82;
    margin-top: 5px;
}
</style>